// ======================== 发ajax请求渲染广告列表 ========================
query = {
  advposdesc: '',
  advposname: '',
  page: 1,
  limit: 10,
}
async function renderList() {
  const { data: { data } } = await axios.get('http://124.223.14.236:8060/admin/ydd_advpos/list', { params: query })
  document.querySelector('#list').innerHTML = data.data.map((item, index) => {
    const { advposdesc, advposname, advposnum, advpossize, id } = item
    // console.log(advposname)
    return ` <tr>
                 <td>${index + 1}</td>
                 <td>${advposname}</td>
                 <td>${advposdesc}</td>
                 <td>${advposnum}</td>
                 <td>${advpossize}</td>
                 <td>
                   <button type="button" class="layui-btn layui-btn-sm edit" data-id='${id}'>
                     <i class="layui-icon">&#xe642;</i>
                   </button>
                   <button type="button" class="layui-btn layui-btn-sm del" data-id='${id}'>
                     <i class="layui-icon">&#xe640;</i>
                   </button>
                 </td>
             </tr>`
  }).join('')
  // 通过函数调用将广告总数传递至分页函数部分
  renderPage(data.count)
}
renderList()
// console.log(data.count)
let laypage = layui.laypage
function renderPage(count) {

  laypage.render({
    elem: 'page-box',
    count, //数据总数，从服务端得到
    limit: query.limit,//每页显示的条数
    curr: query.page,// 起始页
    limits: [2, 4, 6, 8, 10],//每页条数的选择项
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
    jump: function (obj, first) {
      //obj包含了当前分页的所有参数，比如：
      // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
      // console.log(obj.limit); //得到每页显示的条数
      query.page = obj.curr
      query.limit = obj.limit
      //首次不执行
      if (!first) {
        //do something
        renderList()//点击切换的时候执行，发请求
      }
    }
  })
}

let layer = layui.layer
// ======================== 添加功能 ========================
let addFormstr = `
     <form  id='confirm' style="display: block;" id="addForm" class="layui-form" lay-filter="editForm">
        <!-- 第一行 广告位名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">名称</label>
          <div class="layui-input-block">
            <input type="text" name="advposname" required  placeholder="请输入广告位名称" autocomplete="off"
              class="layui-input" style="width: 350px; margin-top: 14px">
          </div>
        </div>
         <!-- 第二行 广告位描述 -->
        <div class="layui-form-item">
          <label class="layui-form-label">描述</label>
          <div class="layui-input-block">
            <textarea name="advposdesc" placeholder="请输入广告位描述" class="layui-textarea" style="width: 350px;"></textarea>
          </div>
        </div>
         <!-- 第三行 广告位尺寸 -->
        <div class="layui-form-item">
          <label class="layui-form-label">尺寸</label>
          <div class="layui-input-block">
            <input type="text" name="advpossize" required  placeholder="请输入广告位尺寸" autocomplete="off" class="layui-input" style="width: 350px;">
          </div>
        </div>
        <!-- 第四行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block" style=" margin-left:360px">
            <button class="layui-btn" lay-submit lay-filter="formDemo" id='cancel'>取消</button>
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认</button>
          </div>
        </div>
      </form>
`
//添加类别弹出层
let addFormindex
$('#increase').on('click', function () {
  // addFormindex是open弹层返回的一个当前层索引
  addFormindex = layer.open({
    content: addFormstr,//content可传入普通的html内容，还可以指定DOM
    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
    //若你采用 layer.open({ type: 1 })方式调用，则type为必填项（信息框除外）
    type: 1,
    area: ['500px', '350px'],//弹出层宽高
    title: '添加广告位'//标题
  })
})
// 由于form表单是动态创建的，直接注册submit事件用事件对象是阻止不了表单的默认行为，需用事件委托解决这一问题
$('body').on('submit', '#confirm', function (e) {
  e.preventDefault()
  const data = $(this).serialize()
  axios.post('/ydd_advpos/add', data).then(res => {
    layer.msg('广告位添加成功')
    layer.close(addFormindex)
    renderList()
  })
})
// 点击取消关闭弹窗
$('#cancel').click(function (e) {
  e.preventDefault()
  layer.close(addFormindex)
})
// ======================== 删除功能 ========================
$('#list').on('click', '.del', function () {
  const id = $(this).attr('data-id')
  axios.get(`/ydd_advpos/del`, { params: { id } }).then(({ data: { errno, errmsg } }) => {
    console.log(errno, errmsg)
    if (errno === 1000) {
      return layer.msg(errmsg)
    }
    renderList()
  })
})
// ======================== 编辑功能 ========================
let editFormStr = `
     <form style="display: block;" id="editForm" class="layui-form" lay-filter="editForm">
        <!-- 存Id -->
        <div class="layui-form-item layui-hide">
          <label class="layui-form-label">名称</label>
          <div class="layui-input-block">
            <input type="text" name="id" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" >
          </div>
        </div>
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">名称</label>
          <div class="layui-input-block">
            <input type="text" name="advposname" required lay-verify="required" placeholder="请输入广告位名称" autocomplete="off" class="layui-input" style="width: 350px; margin-top: 14px">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">描述</label>
          <div class="layui-input-block">
            <textarea name="advposdesc" placeholder="请输入广告位描述" class="layui-textarea" style="width: 350px;"></textarea>
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">尺寸</label>
          <div class="layui-input-block">
            <input type="text" name="advpossize" required lay-verify="required" placeholder="请输入广告位尺寸" autocomplete="off" class="layui-input" style="width: 350px;">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block" style=" margin-left:310px">
            <button class="layui-btn" lay-submit lay-filter="formDemo">取消修改</button>
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
          </div>
        </div>
      </form>
`
// 编辑弹出层返回的索引
let form = layui.form
let editFormindex

// 显示编辑表单
$('#list').on('click', '.edit', function () {
  //发请求根据Id获取文章类别
  const id = $(this).attr('data-id')
  // console.log(id);
  axios.get('/ydd_advpos/rowInfo', { params: { id } }).then(({ data: { data } }) => {
    // console.log(res)
    //将获取到的数据通过layui里面的方法赋值给表单
    form.val("editForm", data)//editForm 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
  })

  // 编辑弹出层
  editFormindex = layer.open({
    content: editFormStr,//content可传入普通的html内容，还可以指定DOM
    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
    //若你采用 layer.open({ type: 1 })方式调用，则type为必填项（信息框除外）
    type: 1,
    area: ['500px', '350px'],//弹出层宽高
    title: '修改广告位'//标题
  })
  // 编辑功能
  $('body').on('submit', '#editForm', function (e) {
    e.preventDefault()
    // let id = $(this).attr('data-id')
    // console.log(id)
    // if (id < 5) {
    //     id = Math.round(id)
    // } else {
    //     id = Math.ceil(id)
    // }
    const data = $(this).serialize()
    console.log(data)
    axios.post(`/ydd_advpos/update`, data).then((res) => {
      layer.msg('广告位修改成功')
      layer.close(editFormindex)
      renderList()
    })
  })
})

// ======================== 重置功能 ========================
$('.reset').click(function (e) {
  e.preventDefault()
  // 将请求数据修改为默认值
  query.advposdesc = ''
  query.advposname = ''
  query.page = 1
  query.limit = 10
  // 重新渲染广告列表
  renderList()
})
// ======================== 查找功能 ========================
$('.search').click(function (e) {
  e.preventDefault()
  // 获取到输入框里面的值
  const content = $('.formVal').val()
  // 发ajax请求获取全部的列表内容
  query.advposname = content
  renderList()
})

// ======================== 导出功能 ========================
// const exportBtn = document.querySelector(".exportBtn")
// // 当用户点击按钮时，执行导出操作
// exportBtn.onclick = function () {
//   // 创建一个文件内容字符串（这里使用了一个简单的示例字符串）
//   const content = "这是一个简单的文件内容示例"

//   // 创建一个 Blob 对象，并设置 MIME 类型为 plain/text
//   const blob = new Blob([content], { type: "plain/text" });

//   //创建一个临时链接，并将该链接下载
//   const link = document.createElement("a");
//   link.href = URL.createObjectURL(blob)
//   link.download = "example.txt"
//   link.click()

//   // 释放 URL 对象
//   URL.revokeObjectURL(link.href)
// }

$('.exportBtn').click(function () {
  var table = document.getElementById("tabInfo")
  var data = []
  for (var i = 0, row; row = table.rows[i]; i++) {
    var rowData = []
    for (var j = 0, col; col = row.cells[j]; j++) {
      rowData.push(col.innerText)
    }
    data.push(rowData)
  }
  // 创建工作簿
  var workbook = XLSX.utils.book_new()

  // 创建工作表
  var worksheet = XLSX.utils.aoa_to_sheet(data)

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1")

  // 导出工作簿为 Excel 文件
  XLSX.writeFile(workbook, "数据.xlsx")
})
